<template>
    <w-tab-list  @clear-search="clearSearch(true)"
                 @clear-selection="clearSelection"
                 @refresh-data="refreshData(true)"
                 @switch-page="switchPage"
                 @search-active="searchActive"
                 @delete-batch="removeClick"
                 @open-add-from="insert"
                 :total="paging.total"
                 :page-size="paging.pageSize"
                 :frame="false"
    >
        <template #searchItem>
            <ul style="float:left;">
                <li>
                    关键字：<el-input type="text" placeholder="根据岗位编号或岗位编码查找" class="sh" v-model="search.keyword"/>
                </li>
                <li>
                    状态：<el-select v-model="search.status" placeholder="选择状态" clearable>
                        <el-option label="启用" :value="1"/>
                        <el-option label="弃用" :value="0"/>
                    </el-select>
                </li>
                <li>
                    创建时间：<el-date-picker v-model="search.date" type="daterange" size="default" start-placeholder="开始时间" end-placeholder="结束时间" clearable class="picker"/>
                </li>
            </ul>
        </template>
        <template #batchOperationItem></template>
        <template #dataList>
            <el-table stripe :data="positionData"
                      @selection-change="saveSelection"
                      header-row-class-name="header-class" ref="positionTable" id="table"
                      v-loading="loading"
                      element-loading-text="正在加载岗位管理数据"
            >
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="id" label="编号" width="60" align="center"/>
                <el-table-column prop="name" label="岗位名称" width="140"/>
                <el-table-column prop="code" label="岗位编码" width="140"/>
                <el-table-column prop="sort" label="显示顺序" width="80"/>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.enabled"
                                   :active-value="1"
                                   :inactive-value="0"
                                   active-text="启用"
                                   inactive-text="弃用"
                                   :before-change="switchEnabled"
                                   @change="enableChange($event,scope.row)"
                                   size="small"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template #default="s">
                        {{s.row.remark!=null? s.row.remark: '无'}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"/>
                <el-table-column label="操作" width="200">
                    <template #default="s">
                        <el-button type="text" size="small" @click="edit(s.row)" :icon="Edit">编辑</el-button>
                        <el-button type="text" size="small" @click="removeClick(s.row)">删除</el-button>
<!--                        <el-button type="text" size="small" :icon="DArrowRight">更多</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </w-tab-list>
    <position-form ref="positionFrom" width="40%" @refresh-data="refreshData"/>
</template>

<script>
import {Search,Refresh,RefreshRight,CollectionTag,Delete,Plus,Edit,DArrowRight,Picture,Failed} from '@element-plus/icons-vue'
import WTabList from "../../com/WTabList.vue";
import {deletePosition, getPositionList, updatePosition} from "../../../network/sys/position";
import PositionForm from "./form/PositionForm.vue";

export default {
    name: "MenuTemplate",
    components:{
        PositionForm,
        WTabList
    },
    setup(props){
        return{
            Search,
            Refresh,
            RefreshRight,
            CollectionTag,
            Delete,
            Plus,
            Edit,
            DArrowRight,
            Picture,
            Failed
        }
    },
    data(){
        return{
            positionData: [],
            selection: [],
            paging:{
                total: 100,//记录总数
                pageSize: 9,//每页记录数
                pageNum: 1,//当前页码
                pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
            },
            search:{
                keyword: null,
                status: null,
                date: null,
            },
            loading: false,
        }
    },
    methods:{
        /*1、搜索框管理*/
        //搜索执行函数
        searchActive(){
            this.$utils.searchActive({
                data: this.search,
                initData: this.$options.data.call(this).search,
                executeFn:()=>{
                    this.loadPositionPageInfo();
                }
            })
        },
        //清空搜索框
        clearSearch(hint){
            this.$utils.resetSearchParams({
                initData: this.$options.data.call(this).search,
                data: this.search,
                hint: hint,
                callback: ()=>{
                    this.loadPositionPageInfo();
                }
            });
        },
        //编辑记录
        removeClick(row){
            if(row){
                this.$operate.remove({
                    title: '删除岗位',
                    data: `' ${row.name}'`,
                    executeFn: ()=>{
                        this.remove([row.id]);
                    }
                })
            }else{
                this.$operate.removeBatch({
                    title: '删除岗位',
                    selection: this.selection,
                    key: 'id',
                    executeFn: (ids)=>{
                        this.remove(ids);
                    }
                })
            }
        },
        remove(ids){
            deletePosition(ids).then(vo=>{
                this.$response.handle({
                    data:vo,
                    success: '删除成功',
                    error: '删除失败',
                    successFn: ()=>{
                        this.refreshData();
                    },
                    log: '删除结果'
                })
            })
        },
        //修改角色状态
        switchEnabled(){
            return this.$operate.switchStatus({
                title: '修改岗位状态',
                hint: '你确认要更改该岗位状态吗'
            });
        },
        //修改角色状态执行
        enableChange($event,row){
            // console.log('val',$event);
            // console.log('id',row.id)
            updatePosition({
                id: row.id,
                enabled: $event
            }).then(vo=>{
                this.$response.handle({
                    data: vo,
                    success: '修改成功',
                    error: '修改失败',
                    // successFn: ()=>{
                    //     this.refreshData();
                    // },
                    log: '修改角色'
                })
            })
        },
        /*3.分页管理*/
        //切换页面
        async switchPage(index){
            this.paging.pageNum = index;
            await this.loadPositionPageInfo();
        },
        /*4.对话框管理*/
        //打开新增对话框
        insert(){
            let frm = this.$refs.positionFrom;
            frm.visible = true;
            frm.type = 0;
            frm.title = '添加岗位';
        },
        edit(row){
            let frm = this.$refs.positionFrom;
            frm.visible = true;
            frm.type = 1;
            frm.title = '修改岗位信息';
            this.$nextTick(function (){
                frm.setPosition(row);
            })
        },
        /*5.表格管理*/
        //刷新表格数据
        refreshData(hint){
            this.loadPositionPageInfo(hint);
        },
        //保存用户选中行数据
        saveSelection(selection){
            this.selection = selection;
        },
        clearSelection(){
            this.$refs.positionTable.clearSelection();
        },
        /*6.数据加载项*/
        async loadPositionPageInfo(hint){
            this.loading = true;
            getPositionList({
                keyword: this.search.keyword,
                status: this.search.status,
                start: this.search.date==null ? null : new Date(this.search.date[0]).format('yyyy-MM-dd'),
                end: this.search.date==null ? null : new Date(this.search.date[1]).format('yyyy-MM-dd'),
                pageNum:this.paging.pageNum,
                pageSize:this.paging.pageSize
            }).then(vo=>{
                this.loading = false;
                this.$response.loadPageInfo({
                    data: vo,
                    executeFn: ()=>{
                        this.positionData = vo.list;
                        this.paging.total = vo.total;
                    },
                    hint: hint,
                    log: '岗位数据列表'
                })
            })
        },
        init(){
            this.loadPositionPageInfo();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.tab-list{
    height: 99%;
}
.sh{
    width: 280px;
}
.el-select-dropdown__item{
    width: 100%;
    color: darkgray;
}
.el-select{
    width: 120px;
}
</style>
